<template>
  <div class="order-confirm">
    <!-- 1.标题区域 -->
    <order-header title="确认订单">
      <span slot="desc">温馨提示： 请填写收获地址</span>
    </order-header>
    <!-- 2.内容区域 -->
    <div class="container">
      <!-- 收货地址区域 -->
      <div class="address">
        <h2>收货地址</h2>
        <ul class="list">
          <li
            class="item"
            v-if="addressList.length"
            v-for="(item, index) in addressList"
            :key="item.id"
            @click="activeClick(index, item.id)"
            :class="{ activeaddress: currentIndex === index }"
          >
            <div class="name">{{ item.receiverName }}</div>
            <div class="phone">{{ item.receiverMobile }}</div>
            <div class="pos">
              {{ item.receiverProvince }} {{ item.receiverCity }}
              {{ item.receiverDistrict }} {{ item.receiverAddress }}
            </div>
            <div class="control">
              <span class="delete" @click="deteleAddress(item.id)"></span>
              <span class="setting" @click="settingAddress(item)"></span>
            </div>
          </li>
          <li class="addnew" @click="addAddress">
            <div class="icon-add"></div>
            <div>添加新地址</div>
          </li>
        </ul>
      </div>
      <!-- 商品列表区域 -->
      <div class="goods">
        <h2>商品</h2>
        <ul class="goodslist">
          <li class="item" v-for="(item, index) in toPayGoodsList" :key="index">
            <div class="goods-img">
              <img :src="item.productMainImage" alt="" />
            </div>
            <div class="goods-name">{{ item.productName }}</div>
            <div class="goods-desc">{{ item.productSubtitle }}</div>
            <div class="goods-count">
              {{ item.productPrice }}x{{ item.quantity }}
            </div>
            <div class="goods-price">{{ item.productTotalPrice }}元</div>
          </li>
        </ul>
      </div>
      <!-- 配送方式区域 -->
      <div class="post">
        <h2>配送方式</h2>
        <span>包邮</span>
      </div>
      <!-- 发票区域 -->
      <div class="fapiao">
        <h2>发票</h2>
        <span>电子发票</span>
        <span>个人</span>
      </div>
      <!-- 结算区域 -->
      <div class="jiesuan">
        <div class="totalcount">
          商品件数：<span>{{ toPayGoodsList.length }}件</span>
        </div>
        <div class="totalprice">
          商品总价：<span>{{ cartTotalPrice }}元</span>
        </div>
        <div class="discount">优惠活动：<span>0元</span></div>
        <div class="other">运费：<span>0元</span></div>
        <div class="totalpay">
          应付总额：<span>{{ cartTotalPrice }}元</span>
        </div>
      </div>
      <!-- 返回购物车和结算按钮区域 -->
      <div class="btn">
        <div class="backbtn" @click="backToCart">返回购物车</div>
        <div class="paybtn" @click="orderSubmit">去结算</div>
      </div>
    </div>
    <!-- 删除之后弹出的模态框 -->
    <model
      title="确认删除"
      btnType="1"
      :showModle="isShowDelModel"
      @sureClick="SureDelClick"
      @closeClick="CloseDelClick"
      sureText="确认"
      closeText="取消"
    >
      <p slot="content">确认删除此条地址信息？</p>
    </model>

    <!-- 新增收货地址后弹出的模态框 -->
    <model
      title="添加收货地址"
      btnType="2"
      :showModle="isShowAddModle"
      @sureClick="SureAddClick"
      @closeClick="CloseAddClick"
      sureText="保存"
      closeText="取消"
    >
      <div slot="content" class="add-form">
        <div class="item">
          <input
            type="text"
            class="input"
            placeholder="姓名"
            v-model="Name"
            key="name"
          />
          <input
            type="text"
            class="input"
            placeholder="商品号码"
            v-model="Mobile"
            key="mobile"
          />
        </div>
        <div class="item">
          <select name="provice" v-model="Province" key="Province">
            <option value="四川">四川</option>
            <option value="重庆">重庆</option>
            <option value="上海">上海</option>
          </select>
          <select name="city" v-model="City" key="City">
            <option value="成都市">成都市</option>
            <option value="重庆市">重庆市</option>
            <option value="上海市">上海市</option>
          </select>
          <select name="district" v-model="District" key="District">
            <option value="武侯区">武侯区</option>
            <option value="成华区">成华区</option>
            <option value="青羊区">青羊区</option>
            <option value="高新区">高新区</option>
            <option value="天府新区">天府新区</option>
            <option value="金牛区">金牛区</option>
          </select>
        </div>
        <div class="item" v-model="Address">
          <textarea
            name="address"
            placeholder="详细地址"
            v-model="Address"
          ></textarea>
        </div>
        <div class="item">
          <input
            type="text"
            class="input"
            placeholder="邮政编码"
            v-model="Zip"
            key="zip"
          />
        </div>
      </div>
    </model>

    <!-- 编辑收货地址后弹出的模态框 -->
    <model
      title="编辑收货地址"
      btnType="2"
      :showModle="isShowEditModle"
      @sureClick="SureEditClick"
      @closeClick="CloseEditClick"
      sureText="提交"
      closeText="取消"
    >
      <div slot="content" class="add-form">
        <div class="item">
          <input
            type="text"
            class="input"
            placeholder="姓名"
            v-model="Name"
            key="name"
          />
          <input
            type="text"
            class="input"
            placeholder="商品号码"
            v-model="Mobile"
            key="mobile"
          />
        </div>
        <div class="item">
          <select name="provice" v-model="Province" key="Province">
            <option value="四川">四川</option>
            <option value="重庆">重庆</option>
            <option value="上海">上海</option>
          </select>
          <select name="city" v-model="City" key="City">
            <option value="成都市">成都市</option>
            <option value="重庆市">重庆市</option>
            <option value="上海市">上海市</option>
          </select>
          <select name="district" v-model="District" key="District">
            <option value="武侯区">武侯区</option>
            <option value="成华区">成华区</option>
            <option value="青羊区">青羊区</option>
            <option value="高新区">高新区</option>
            <option value="天府新区">天府新区</option>
            <option value="金牛区">金牛区</option>
          </select>
        </div>
        <div class="item" v-model="Address">
          <textarea
            name="address"
            placeholder="详细地址"
            v-model="Address"
          ></textarea>
        </div>
        <div class="item">
          <input
            type="text"
            class="input"
            placeholder="邮政编码"
            v-model="Zip"
            key="zip"
          />
        </div>
      </div>
    </model>
  </div>
</template>

<script>
import OrderHeader from "components/orderheader/OrderHeader";
import Model from "components/model/Model";

export default {
  name: "orderConfirm",
  components: {
    OrderHeader,
    Model,
  },
  data() {
    return {
      addressList: [], //地址列表
      cartList: [], //购物车全部商品列表
      cartTotalPrice: 0, //购物车总金额
      isShowDelModel: false, //是否显示删除地址模态框
      isShowAddModle: false, //是否显示添加地址模态框
      isShowEditModle: false, //是否显示编辑地址模态框
      controlItemId: "", //当前选中的/正在操作的地址id
      checkItem: {}, //选中的地址对象
      Name: "", //收货姓名
      Mobile: "", //收货电话
      Province: "", //收货省份
      City: "", //收货城市
      District: "", //收货区域
      Address: "", //收货地址
      Zip: "", //收货邮编
      currentIndex: 0, //当前选中的收货地址索引
    };
  },
  computed: {
    // 购物车中选中需要结算的商品列表
    toPayGoodsList() {
      let arr = [];
      arr = this.cartList.filter((item) => {
        return item.productSelected == true;
      });
      return arr;
    },
  },
  mounted() {
    // 获取用户收货地址列表
    this.getAddressList();
    // 获取购物车列表
    this.getCartList();
  },
  methods: {
    // 1.获取地址列表数据
    getAddressList() {
      // request({
      //   method: "get",
      //   url: "/shippings",
      // }).then((res) => {
      //   console.log(res);
      //   this.addressList = res.list;
      // });
    },
    // 2.获取购物车列表数组
    getCartList() {
      // request({
      //   method: "get",
      //   url: "/carts",
      // }).then((res) => {
      //   console.log(res);
      //   this.cartList = res.cartProductVoList;
      //   this.cartTotalPrice = res.cartTotalPrice;
      // });
    },

    // 3.编辑收货地址按钮点击
    settingAddress(item) {
      // 先将当前正在操作的这个地址对象的id保存在data中
      this.controlItemId = item.id;
      this.isShowEditModle = true;
      // 将item对象中的值解构出来 分别赋值给表单中的value值 双向绑定
      this.Name = item.receiverName;
      this.Mobile = item.receiverMobile;
      this.Province = item.receiverProvince;
      this.City = item.receiverCity;
      this.District = item.receiverDistrict;
      this.Address = item.receiverAddress;
      this.Zip = item.receiverZip;
    },
    CloseEditClick() {
      this.isShowEditModle = false;
    },
    SureEditClick() {
      // 1.进行输入内容的校验
      let errMessage = "";
      if (!this.Name) {
        errMessage = "请输入姓名";
      } else if (!this.Mobile || !/\d{11}/.test(this.Mobile)) {
        errMessage = "请输入电话号码";
      } else if (!this.Province) {
        errMessage = "请选择省份";
      } else if (!this.City) {
        errMessage = "请选择城市";
      } else if (!this.District) {
        errMessage = "请选择区域";
      } else if (!this.Address) {
        errMessage = "请输入收货地址";
      } else if (!this.Zip || !/\d{6}/.test(this.Zip)) {
        errMessage = "请输入正确邮政编码";
      }
      // 只有有错误信息就进入到报错系统提示
      if (errMessage) {
        this.$message.error(errMessage);
      } else {
        // 2.当一个错误信息也没有的时候发送请求新增数据
        // request({
        //   method: "put",
        //   url: `/shippings/${this.controlItemId}`,
        //   data: {
        //     receiverName: this.Name,
        //     receiverMobile: this.Mobile,
        //     receiverProvince: this.Province,
        //     receiverCity: this.City,
        //     receiverDistrict: this.District,
        //     receiverAddress: this.Address,
        //     receiverZip: this.Zip,
        //   },
        // }).then(() => {
        //   this.isShowAddModle = false; //关闭弹窗
        //   this.getAddressList(); //重新获取列表 让页面刷新
        // });
      }
      // 关闭模态框
      this.isShowEditModle = false;
    },

    // 4.添加地址按钮点击
    addAddress() {
      // 显示弹框
      this.isShowAddModle = true;
    },
    // 点击确认保存新增地址
    SureAddClick() {
      // 1.先进行输入内容的校验
      let errMessage = "";
      if (!this.Name) {
        errMessage = "请输入姓名";
      } else if (!this.Mobile || !/\d{11}/.test(this.Mobile)) {
        errMessage = "请输入电话号码";
      } else if (!this.Province) {
        errMessage = "请选择省份";
      } else if (!this.City) {
        errMessage = "请选择城市";
      } else if (!this.District) {
        errMessage = "请选择区域";
      } else if (!this.Address) {
        errMessage = "请输入收货地址";
      } else if (!this.Zip || !/\d{6}/.test(this.Zip)) {
        errMessage = "请输入正确邮政编码";
      }
      // 只有有错误信息就进入到报错系统提示
      if (errMessage) {
        this.$message.error(errMessage);
      } else {
        // 2.当一个错误信息也没有的时候发送请求新增数据
        // request({
        //   method: "post",
        //   url: "/shippings",
        //   data: {
        //     receiverName: this.Name,
        //     receiverMobile: this.Mobile,
        //     receiverProvince: this.Province,
        //     receiverCity: this.City,
        //     receiverDistrict: this.District,
        //     receiverAddress: this.Address,
        //     receiverZip: this.Zip,
        //   },
        // }).then(() => {
        //   this.isShowAddModle = false; //关闭弹窗
        //   this.getAddressList(); //重新获取列表 让页面刷新
        // });
      }
    },
    // 点击取消新增收货地址
    CloseAddClick() {
      this.isShowAddModle = false;
    },

    // 5.删除地址按钮点击
    deteleAddress(id) {
      this.isShowDelModel = true;
      this.controlItemId = id;
    },

    // 点击确认删除地址
    SureDelClick() {
      // 发送请求确认删除
      // request({
      //   method: "delete",
      //   url: `/shippings/${this.controlItemId}`,
      // }).then((res) => {
      //   this.getAddressList();
      //   this.isShowDelModel = false;
      //   this.$message.success("操作成功！");
      // });
    },
    // 点击弹框的取消按钮
    CloseDelClick() {
      this.isShowDelModel = false;
    },

    // 6.选中要收货的地址
    activeClick(index, id) {
      console.log(index, id);
      this.currentIndex = index;
      // 根据索引保存当前选中地址的id
      this.controlItemId = this.addressList[this.currentIndex].id;
    },

    // 7.点击跳转购物车
    backToCart() {
      this.$router.push("/cart");
    },
    // 8.点击结算按钮
    orderSubmit() {
      // 判断用户是否添加了地址
      if (this.addressList.length === 0) {
        this.$message.error("请添加收货地址！");
      }
      if (!this.controlItemId) {
        console.log("jinlaile");
        // 获取当前选中的地址对象id
        this.controlItemId = this.addressList[this.currentIndex].id;
        console.log(this.controlItemId);
      }
      // 发送网络请求
      // request({
      //   method: "post",
      //   url: "/orders",
      //   data: {
      //     shippingId: this.controlItemId,
      //   },
      // }).then((res) => {
      //   console.log(res);
      //   console.log(res.orderNo);
      //   // 路由进行跳转
      //   this.$router.push({
      //     path: "/order/pay",
      //     query: {
      //       orderId: res.orderNo,
      //     },
      //   });
      // });
    },
  },
};
</script>

<style scoped>
/* 表单区域样式 */
.add-form .item {
  margin-bottom: 15px;
  font-size: 14px;
}
.add-form .item input {
  width: 270px;
  height: 30px;
  line-height: 30px;
  padding-left: 15px;
  box-sizing: border-box;
  border: 1px solid #e5e5e5;
  outline: none;
}
.add-form .item select {
  margin-right: 15px;
  border: 1px solid #e5e5e5;
  width: 90px;
  height: 30px;
  line-height: 30px;
  color: #666;
}
.add-form .item input:first-child {
  margin-right: 20px;
}
.add-form .item textarea {
  width: 98%;
  padding: 15px;
  box-sizing: border-box;
  border: 1px solid #e5e5e5;
  resize: none;
  line-height: 30px;
}

/* 确认订单外层样式 */
.order-confirm {
  background-color: #fff;
}
/* 包裹区域 */
.container {
  margin-top: 20px;
  padding: 30px 0;
  box-sizing: border-box;
  background-color: #fff;
}

/* 结算区域样式 */
.jiesuan {
  margin-top: 20px;
  text-align: right;
  border-bottom: 2px solid #e5e5e5;
  padding-bottom: 20px;
}
.jiesuan div {
  height: 30px;
  line-height: 30px;
  font-size: 16px;
}
.jiesuan div span {
  display: inline-block;
  color: #ff6600;
  width: 150px;
}
.totalpay {
  margin-top: 15px;
}
.totalpay span {
  font-size: 24px;
  font-weight: 600;
}
/* 底部确认订单样式 */
.btn {
  margin-top: 30px;
  text-align: right;
}
.backbtn {
  display: inline-block;
  width: 120px;
  height: 40px;
  background-color: #fff;
  text-align: center;
  line-height: 40px;
  color: #666;
  cursor: pointer;
  margin-right: 10px;
}
.paybtn {
  display: inline-block;
  width: 120px;
  height: 40px;
  background-color: #ff6600;
  text-align: center;
  line-height: 40px;
  color: #fff;
  cursor: pointer;
}
/* 地址 发票样式 */
.post {
  margin-top: 20px;
  display: flex;
  align-items: center;
}
.post h2 {
  margin-right: 40px;
}
.post span {
  margin-right: 5px;
  color: #ff6600;
}
.fapiao {
  margin-top: 20px;
  display: flex;
  align-items: center;
}
.fapiao h2 {
  margin-right: 75px;
}
.fapiao span {
  margin-right: 5px;
  color: #ff6600;
}
/* 商品展示列表样式 */
.goods {
  margin-top: 20px;
}
.goods h2 {
  border-bottom: 2px solid #e5e5e5;
  padding-bottom: 5px;
}
.goods .item {
  height: 50px;
  border-bottom: 2px solid #e5e5e5;
  line-height: 50px;
  display: flex;
  align-items: center;
  position: relative;
}
.goods-img {
  width: 30px;
  height: 40px;
  margin: 0 10px;
}
.goods-img img {
  width: 100%;
  position: relative;
  top: -5px;
}
.goods-name {
  font-size: 18px;
  margin-right: 10px;
}
.goods-desc {
  font-size: 18px;
}
.goods-count {
  font-size: 18px;
  width: 80px;
  position: absolute;
  left: 900px;
}
.goods-price {
  font-size: 18px;
  color: #ff6600;
  white-space: nowrap;
  position: absolute;
  right: 50px;
}

/* 地址展示区域样式 */
.address h2 {
  padding: 30px 0 20px 0;
}
.address .list {
  display: flex;
  flex-wrap: wrap;
}
.address .item {
  width: 270px;
  height: 180px;
  border: 2px solid #e5e5e5;
  margin-right: 15px;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
}
.activeaddress {
  border: 3px solid #ff6600 !important;
}
.addnew {
  width: 270px;
  height: 180px;
  border: 2px solid #e5e5e5;
  margin-right: 15px;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #dddcdd;
  cursor: pointer;
}
.addnew .icon-add {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: url("/imgs/icon-add.png") no-repeat center;
  background-size: 15px;
  background-color: #dddcdd;
  margin-bottom: 15px;
}
.item .name {
  font-size: 18px;
}
.item .phone {
  font-size: 14px;
  margin-top: 20px;
}
.item .pos {
  font-size: 14px;
}
.item .control {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  width: 230px;
  bottom: 10px;
}
.item .control span.delete {
  width: 20px;
  height: 20px;
  background: url("/imgs/icon-close.png") no-repeat center;
  background-size: 20px;
  cursor: pointer;
}
.item .control span.setting {
  width: 20px;
  height: 20px;
  background: url("/imgs/icon-setting.png") no-repeat center;
  background-size: 20px;
  cursor: pointer;
}
</style>
